"use client";

import { useOrganization } from "@clerk/nextjs";
import { api } from "@/convex/_generated/api";
import { Button } from "@/components/ui/button";
import { useApiMutation } from "@/hooks/use-api-mutaion";
import Image from "next/image";
import { toast } from "sonner";
import { useRouter } from "next/navigation";

export const EmptyBoard = () => {
  const { organization } = useOrganization();
  const { mutate, pedding } = useApiMutation(api.board.create);
  const router = useRouter();

  const onClick = async () => {
    try {
      if (!organization) {
        return;
      }

      const id = await mutate({
        orgId: organization.id,
        title: "untitled",
      });

      router.push(`/board/${id}`);
      toast.success("创建成功");
    } catch (error) {
      console.error("创建失败：", error);
      toast.error("创建失败");
    }
  };

  return (
    <div className="h-full flex flex-col items-center justify-center">
      <Image
        priority
        src="/412006.png"
        alt="emptySearch"
        width={200}
        height={220}
      />
      <h2 className="text-2xl font-semibold mt-6">创建你的第一个会员</h2>
      <p className="text-muted-foreground text-sm mt-2">
        创建一个会员已便开始使用
      </p>
      <div className="mt-6">
        <Button size="lg" onClick={onClick} disabled={pedding}>
          创建会员
        </Button>
      </div>
    </div>
  );
};
